<template>
  <ul>
    <li v-for="(val, key, index) in dict" :key="index">
      {{ index }}--{{ val.name }}
    </li>
  </ul>
  <br />
  <ul>
    <li v-for="(val, index) in list" :key="index">
      <span v-if="val.age < 30">{{ index }}--{{ val.name }}</span>
    </li>
  </ul>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      dict: {
        1: {
          name: "Tom",
          age: 18,
        },
        2: {
          name: "Lily",
          age: 28,
        },
        3: {
          name: "张三",
          age: 30,
        },
      },
      list: [
        {
          name: "Tom",
          age: 18,
        },
        {
          name: "Lily",
          age: 28,
        },
        {
          name: "张三",
          age: 30,
        },
      ],
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>
